<template>
	
	<view  class="goods_detail">
		 <swiper    indicator-dots="true">
			 <swiper-item   v-for=" (it,index)  in  swipers"  :key="index" >
				   <image :src="  it.src "></image>
			 </swiper-item>
		 </swiper>
		 
		 <view  class="box1"  >
			 <view  class="price">
				 <text>{{info.market_price}}</text>
				 <text>{{info.sell_price}}</text>
			 </view>
			 <view   class="goods_name">
				   {{info.title}}
			 </view>
		 </view>
		 <view  class="line"></view>
		 <view  class="box2">
			<view>货号：{{info.goods_no}}</view>
			<view>库存：{{info.stock_quantity}}</view>
		 </view>
		<view  class="line"></view>
		<view  class="box3">
			 <view class="title">
			 	详情介绍
			 </view>
			 <view class="content">
			 	     <rich-text :nodes="content"></rich-text>
			 </view>
		</view>
		
		
			<uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
		
	</view>
</template>

<script>
	
	export default {
		
		data(){
			
			return {
				swipers:[],
				info:{},
				content:'',
				 options: [
					    {
							icon: 'headphones',
							text: '客服'
						}, 
						{
							icon: 'shop',
							text: '店铺',
							info: 2,
							infoBackgroundColor:'#007aff',
							infoColor:"red"
						},
						{
							icon: 'cart',
							text: '购物车',
							info: 2
						},
						],
			
					buttonGroup: [
						{
						  text: '加入购物车',
						  backgroundColor: '#ff0000',
						  color: '#fff'
					   },
					    {
					      text: '立即购买',
					      backgroundColor: '#ffa200',
					      color: '#fff'
					    }
					       ]
			}
		},
		
		
		
		methods:{
			
			  onClick (e) {
				    uni.showToast({
				      title: `点击${e.content.text}`,
				      icon: 'none'
				    })
				  },
				  buttonClick (e) {
				    console.log(e)
				    this.options[2].info++
				  },
				  
				  
				  
			//7、 获取详情--轮播图
			async getSwiper(id){
				  const  result = await  this.$myRequest({
					  url:'/api/getthumimages/' +  id
				  })
				this.swipers = result.data.message.map((it)=>{
					  it.src =  "https://img0.baidu.com/it/u=4128240144,3427151449&fm=253&fmt=auto&app=138&f=JPEG?w=678&h=500"  
				     return  it
				})
			},
		//  8、获取详情参数
		  async  getdetail(id){
				const res = await  this.$myRequest({
					url:'/api/goods/getinfo/' + id
				})
				
				this.info = res.data.message[0]
				
			},
		
		      //  9、获取商品详细介绍
			  async   getDetailContent(id){
				  const  res =  await  this.$myRequest({
					  url:'/api/goods/getdesc/'+ id
				  })
				  
				  this.content = res.data.message[0].content
			  }
			
		},
		
		
		onLoad(options) {
			this.getSwiper(options.id)
			this.getdetail(options.id)
			this.getDetailContent(options.id)
		}
	}
	
	
	
</script>

<style  lang="scss"  scoped>
	  page{
		  
		  height: 100%;
		  .goods_detail{
		  		   swiper{
		  			   height: 700rpx;
		  			   image{
		  				   width: 100%;
		  				   height: 100%;
		  			   }
		  		   }
				   
				   
				   .box1{
					   padding: 10px;
					   
					   .price{
						   font-size: 35rpx;
						   color: $shop-color;
						   line-height: 80rpx;
						   text:nth-child(2){
							   color: #ccc;
							   font-size: 28rpx;
							   text-decoration: line-through;
							   margin-left: 20rpx;
						   }
					   }
					   .goods_name{
						   font-size: 32rpx;
						   line-height: 60rpx;
					   }
				   }
				   .line{
					   height: 16rpx;
					   width: 750rpx;
					   background-color: #eee;
				   }
				   
				   .box2{
					   
					   padding: 0  10px;
					   font-size:32rpx;
					   line-height: 70rpx;
				   }
				   
				   .box3{
					   .title{
						   font-size: 32rpx;
						   padding-left: 10px;
						   border-bottom: 1px  solid #eee;
						   line-height: 70rpx;
					   }
					   
					   .content{
						   padding: 10px;
						   font-size: 28rpx;
						   color: #333;
					   }
				   }
				   
				   .uni-goods-nav{
					   position: fixed;
					   bottom:0;
					   width: 100%;
				   }
		  }
		  
		  
	  }
</style>